<template>
  <div id="thawlist"> 


          <el-table :data="thawdata" style="width: 100%" :height="dtheight" :header-cell-style="{background:'#4F81BC',color:'white'}"
           :row-class-name="tableRowClassName"  :border="true">

                <el-table-column :label="variable_name4 + '编号'"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.pid }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="时间"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.createtime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="账号"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.telphone }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="姓名"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.nickname }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="申请价值"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.price }}</span>
                    </template>
                </el-table-column>
                  <el-table-column label="状态"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span v-if="scope.row.status == 0">待拆分</span>
                        <span v-if="scope.row.status == 1">已拆分</span>
                        <span v-if="scope.row.status == 2">已拒绝</span>
                    </template>
                </el-table-column>
                 <el-table-column label="操作" align='center' width="300px">
                    <template slot-scope="scope" >
                        <el-button size="mini"  type="primary"  plain @click="go_but(scope.row)">拆分记录</el-button>
                        <el-button size="mini"  type="primary"  plain @click="split_but(scope.row)" v-if="scope.row.status == 0">拆分{{ variable_name4 }}</el-button> 
                        <el-button size="mini"  type="primary"  plain v-if="scope.row.status == 0"  @click="bh_but(scope.row)">驳回</el-button> 
                    </template>
                </el-table-column>
  
            </el-table>  



        <el-dialog title="拆分申请" :visible.sync="split_mtk"  width="700px" >
                <el-form ref="form" :model="form" label-width="80px">  
                        <el-row> 
                            <el-col :span="24" style="display:flex;">
                                    <div class="mytitle_item" style="margin-bottom:0px;">
                                        <el-form-item label="申请价值" style="margin-bottom:0px !important;">
                                            <el-input v-model.number="all_number1" readonly="readonly" class="my_input"></el-input>
                                        </el-form-item>
                                    </div>
                            </el-col>  
                        </el-row> 
                </el-form>
                
                <div class="mytitle_item" style="margin-top:20px;">
                        <span style="padding-left:15px;">{{ variable_name4 }}数量：{{ nums }}</span>
                 </div>

                <div class="mytitle_item" style="margin-top:20px;">
                        <span style="padding-left:15px;">拆分{{ variable_name4 }}：{{ all_number }}</span>
                 </div>

              <div class="demo" >
                    <div style="width:100%;"> 
                        <el-form ref="form" :model="datalist" label-width="50px" style="width:100%;">
                            <div style="width:100%;">
                                <div v-for="(item,index) in datalist.dataarr" :key="index" style="display:flex;float: left;width:calc(100%/3);margin-top:20px;">
                                    <el-form-item label="" label-width="0px" style="flex:1;">
                                        <el-input v-model.number="item.number" @blur="chage_input" placeholder="请输入数量" ></el-input>
                                    </el-form-item>
                                        <i  v-if="datalist.dataarr.length-1 == index" class="el-icon-circle-plus tb_class" @click="addItem"></i>
                                        <i  v-else class="el-icon-delete-solid tb_class" @click="delectItem(index)"></i>
                                </div>
                                <div style="clear:both;"></div>
                            </div>
                        </el-form>     
                    </div>
             </div> 

                        
                <div style="text-align: center;width:100%;">
                        <el-button type="primary" style="width:250px;margin-top:50px;background: #F5CF49;border:none;" @click="qr_but1">确认</el-button>
                </div>
    
        </el-dialog> 


   </div>
</template>

<script>

export default {
   name: 'thawlist',
   props:{
      thawdata:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
        split_mtk:false,
        all_number:0,
        all_number1:0,
        datalist:{
            dataarr:[{"number":0}]
        },
        form:{
          select_num:''
        },
        my_id:'',
        nums:0,
    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 303
     this.z_num()
  },
  mounted (){
    
  },
  methods: {
    z_num(){
          this.nums = this.datalist.dataarr.length 
    },
   split_but(row){
      this.split_mtk = true
      this.all_number1 = row.price
      this.my_id = row.id
   },
     addItem(){ //增加表单按钮
        this.datalist.dataarr.push({
        number:0
        })  
        this.z_num()
    },
    delectItem(index){ //删除表单按钮
        this.datalist.dataarr.splice(index, 1)
        this.chage_input()
        this.z_num()
    },
    chage_input(){
         let element = 0 
         for (let i = 0; i < this.datalist.dataarr.length; i++) {
                 if(this.datalist.dataarr[i].number >= 1800){
                      this.open1('单个输入不能超过1800','warning')
                      this.datalist.dataarr[i].number = 0
                 }else{
                       element += parseInt(this.datalist.dataarr[i].number);
                 }
               
          }
          this.all_number = element
    },
    qr_but1(row){
         
          let select_arr =[]

          for(let item of this.datalist.dataarr){
              select_arr.push(item.number)            
          }




         if(parseInt(this.all_number1) != parseInt(this.all_number)){
              this.open1('输入总价值整数与申请价值整数不等','warning')
          }else{
            console.log(select_arr)

              if(select_arr.length <2){
                  this.open1('分配不能小于两种','warning')
              }else{

                    this.post("/goods_full/exchange", {
                        id:this.my_id,
                        arr:select_arr,
                    }).then(res => {  
                        console.log(res)
                        if(res.error_code == 0){
                            this.open1(res.result,'success')  //提示框
                            this.$emit('up_list_fun')
                            this.split_mtk = false
                            this.my_id = ''
                        }else {
                            this.open1(res.message,'warning')
                        }

                    })

              }
                
         }
           



    },
    bh_but(row){
        this.$confirm('是否驳回, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
             this.post("/goods_full/refuse", {
                    id:row.id,
                }).then(res => {

                    if(res.error_code == 0){
                      this.open1(res.result,'success')  //提示框
                      this.$emit('up_list_fun')
                    }else {
                    this.open1(res.message,'warning')
                    }

              })
        })
    },
    go_but(row){
       this.$router.push({
          path: '/index/detailsthow',
          query: {
            name:row.telphone,
            id:row.id
          }
        })
    },


  }
}
</script>


<style scoped>
.demo{
    overflow-y:auto;
    height: 350px;
}
.mytitle{
    height: 35px;
}
.mytitle_item{
    display: flex;
    align-items: center;
}
.mytitle_item::before{
  content:'';
  width: 5px;
  height: 15px;
  background: #F5CF49;
  display: block;
}
.tb_class{
    color:#F5CF49;
    font-size:30px;
    margin-top:5px;
    margin-left:15px;
    margin-right:15px;
  }
  .my_input>>>input{
      width: 300px;
  }
</style>